<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>维修单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>
      
      <el-tabs v-model="activeName">
        <el-tab-pane label="报修信息" name="repair">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="报修单号">{{ repairOrder.orderCode }}</el-descriptions-item>
            <el-descriptions-item label="报修状态">
              <el-tag v-if="repairOrder.status === '0'" type="info">待处理</el-tag>
              <el-tag v-else-if="repairOrder.status === '1'" type="warning">处理中</el-tag>
              <el-tag v-else-if="repairOrder.status === '2'" type="success">已完成</el-tag>
              <el-tag v-else-if="repairOrder.status === '3'" type="danger">已取消</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ repairOrder.equipmentName }}</el-descriptions-item>
            <el-descriptions-item label="设备编号">{{ repairOrder.equipmentCode }}</el-descriptions-item>
            <el-descriptions-item label="报修类型">
              <span v-if="repairOrder.repairType === '1'">设备故障</span>
              <span v-else-if="repairOrder.repairType === '2'">设备保养</span>
              <span v-else-if="repairOrder.repairType === '3'">设备更换</span>
            </el-descriptions-item>
            <el-descriptions-item label="紧急程度">
              <el-tag v-if="repairOrder.emergencyLevel === '1'" type="info">一般</el-tag>
              <el-tag v-else-if="repairOrder.emergencyLevel === '2'" type="warning">紧急</el-tag>
              <el-tag v-else-if="repairOrder.emergencyLevel === '3'" type="danger">非常紧急</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="报修人">{{ repairOrder.reportBy }}</el-descriptions-item>
            <el-descriptions-item label="报修日期">{{ repairOrder.reportDate }}</el-descriptions-item>
            <el-descriptions-item label="故障描述" :span="2">{{ repairOrder.faultDesc }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <el-tab-pane label="维修记录" name="maintenance">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="维修单号">{{ repairRecord.recordCode }}</el-descriptions-item>
            <el-descriptions-item label="维修状态">
              <el-tag v-if="repairRecord.status === '0'" type="info">待处理</el-tag>
              <el-tag v-else-if="repairRecord.status === '1'" type="warning">处理中</el-tag>
              <el-tag v-else-if="repairRecord.status === '2'" type="success">已完成</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="维修人员">{{ repairRecord.repairBy }}</el-descriptions-item>
            <el-descriptions-item label="维修日期">{{ repairRecord.repairDate }}</el-descriptions-item>
            <el-descriptions-item label="维修费用">{{ repairRecord.repairCost }}</el-descriptions-item>
            <el-descriptions-item label="完成时间">{{ repairRecord.finishTime }}</el-descriptions-item>
            <el-descriptions-item label="维修结果" :span="2">{{ repairRecord.repairResult }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ repairRecord.remark }}</el-descriptions-item>
          </el-descriptions>
          
          <div class="component-list" v-if="repairRecord.components && repairRecord.components.length > 0">
            <el-divider content-position="left">更换配件</el-divider>
            <el-table :data="repairRecord.components" border style="width: 100%">
              <el-table-column prop="componentName" label="配件名称" align="center"></el-table-column>
              <el-table-column prop="componentCode" label="配件编号" align="center"></el-table-column>
              <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
              <el-table-column prop="unitPrice" label="单价" align="center"></el-table-column>
              <el-table-column prop="totalPrice" label="总价" align="center"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="action-buttons" style="margin-top: 20px; text-align: center">
        <el-button @click="goBack">返回</el-button>
        <el-button 
          type="primary" 
          v-if="repairRecord.status === '1'"
          @click="handleComplete"
        >确认完成</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getRepairRecord } from "@/api/sb/repairRecord";
import { getRepairOrder } from "@/api/sb/repairOrder";

export default {
  name: "RepairRecordDetail",
  data() {
    return {
      // 报修单ID
      id: null,
      // 激活的选项卡
      activeName: 'repair',
      // 报修单信息
      repairOrder: {
        orderCode: "",
        equipmentName: "",
        equipmentCode: "",
        repairType: "",
        emergencyLevel: "",
        reportBy: "",
        reportDate: "",
        faultDesc: "",
        status: ""
      },
      // 维修记录信息
      repairRecord: {
        recordCode: "",
        status: "",
        repairBy: "",
        repairDate: "",
        repairResult: "",
        repairCost: "",
        finishTime: "",
        remark: "",
        components: []
      }
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    /** 获取详细信息 */
    getDetail() {
      getRepairRecord(this.id).then(response => {
        this.repairRecord = response.data;
        // 获取相关的报修单信息
        if (response.data.repairOrderId) {
          getRepairOrder(response.data.repairOrderId).then(res => {
            this.repairOrder = res.data;
          });
        }
      });
    },
    /** 返回按钮操作 */
    goBack() {
      this.$router.push("/sb/Repair-record");
    },
    /** 确认完成 */
    handleComplete() {
      this.$modal.confirm('是否确认该维修任务已完成？').then(() => {
        const data = {
          id: this.repairRecord.id,
          status: '2',
          finishTime: new Date().toISOString().substr(0, 10)
        };
        // 调用更新接口
        this.$modal.msgSuccess("操作成功");
        this.getDetail(); // 重新获取数据
      }).catch(() => {});
    }
  }
};
</script> 